<style lang="scss" type="text/scss">
.el-checkbox {
  margin: 0 20px 0 0;
}
.el-checkbox + .el-checkbox {
  margin-left: 0;
}
</style>

<template>
  <div>
    <el-button size="mini" type="primary" @click="addPrice">
      <i class="el-icon-plus"></i> 新增价格</el-button>
    <hr/>
    <el-table :data="priceData">
      <el-table-column property="name" width="100" label="名称"></el-table-column>
      <el-table-column property="amount" label="价格/元"></el-table-column>
      <el-table-column property="day" label="时间">
        <template slot-scope="scope">
          <div>{{scope.row | formatterTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button v-if="scope.row.timeType !== 'default'" @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="action" :visible.sync="dialogVisible" append-to-body width="40%">
      <price-edit ref="formPrice" :priceList="priceData" :formPrice="priceObj"></price-edit>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import http from '@/services/xhr';
import apiSetting from '@/services/api';
import priceEdit from '@/pages/themes/editPrice';

export default {
  props: {
    priceItem: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      rowData: {},
      action: '',
      priceObj: {
        name: '',
        timeList: [],
        amount: '',
        timeType: ''
      },
      dialogVisible: false,
      priceData: []
    };
  },
  watch: {
    priceItem: {
      handler(form) {
        this.init();
      },
      deep: true
    }
  },
  components: {
    priceEdit
  },
  filters: {
    formatterTime(value) {
      if (value.timeType === 'holiday') {
        return '元旦，五一，国庆';
      } else if (value.timeType === 'default') {
        return '全时段';
      } else {
        let str = '';
        value.timeList.forEach(element => {
          str += element + ' ';
        });
        return str;
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.rowData = Object.assign({}, this.priceItem);
      let data = {
        amountTemplateQueryVo:{
          topicId: this.rowData.topicId
        }
      };
      this.priceData = [];
      http(apiSetting.getPriceList, data).then(res => {
        this.priceData = res.data.data.list;
      });
    },
    addPrice() {
      this.action = '新增价格';
      this.priceObj = {
        name: '',
        timeList: [],
        amount: '',
        timeType: ''
      };
      this.dialogVisible = true;
    },
    submitForm() {
      this.$refs.formPrice.$refs.formAmountItem.validate(valid => {
        let data = JSON.parse(JSON.stringify(this.$refs.formPrice.form));
        this.priceData.forEach(item => {
          if (item.timeType === 'default' && item.amount > data.amount) {
            this.$message({
              type: 'error',
              message: '价格不能低于 ' + item.amount
            });
            valid = false;
          }
        });
        if (valid) {
          if (data.timeType !== 'default') {
            data.timeList.forEach(item => {
              if (item === '节假日') {
                data.timeType = 'holiday';
              } else {
                data.timeType = 'weekend';
              }
            });
          }
          if (this.action === '新增价格') {
            delete data.amountTemplateId;
            http(apiSetting.addPrice, data)
              .then(res => {
                data.amountTemplateId =
                  res.data.data.amountTemplateVo.amountTemplateId +
                  Math.random();
                this.priceData.push(data);
              })
              .then(() => {
                this.$message({
                  type: 'success',
                  message: '已添加'
                });
                this.dialogVisible = false;
              });
          } else {
            http(apiSetting.editPrice, data)
              .then(res => {
                let len = '';
                this.priceData.forEach((element, index) => {
                  if (element.amountTemplateId === data.amountTemplateId) {
                    len = index;
                  }
                });
                this.priceData.splice(len, 1, data);
              })
              .then(() => {
                this.$message({
                  type: 'success',
                  message: '已修改'
                });
                this.dialogVisible = false;
              });
          }
        }
      });
    },
    handleEdit(row) {
      this.action = '编辑价格';
      this.priceObj = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleDelete(row) {
      let data = {
        id: row.amountTemplateId
      };
      this.$confirm('是否删除此价格模板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          http(apiSetting.delPrice, data)
            .then(res => {
              let len = '';
              this.priceData.forEach((element, index) => {
                if (element.amountTemplateId === row.amountTemplateId) {
                  len = index;
                }
              });
              this.priceData.splice(len, 1);
            })
            .then(() => {
              this.$message({
                type: 'success',
                message: '已删除!'
              });
            });
        })
        .catch(() => {});
    }
  }
};
</script>
